Jak zrobić pokaz slajdów bez użycia PowerPointa? [CSS, JavaScript]
Przygotowanie prezentacji na jakieś publiczne wystąpienie wiąże się zwykle z dłubaniną w PowerPoincie (osoby wolące wolne oprogramowanie wybiorą pewnie OpenOffice Impress). Ale co, jeśli przyjdzie nam wyświetlać prezentację na komputerze, na którym nie ma tych programów? Znacznie większe możliwości w zakresie dostępności i interoperacyjności przyniesie wykonanie slajdów w XHTML-u. Dzięki stworzonym przez W3C skryptom możemy uzyskać wszystkie funkcjonalności prezentacji stworzonej za pomocą dedykowanych narzędzi.
HTML Slidy to elegancko napisany skrypt autorstwa Dave'a Raggetta z Konsorcjum WWW, który pozwala nam przekształcić pojedynczy dokument XHTML w prezentację kolejnych slajdów, wykorzystując jedynie dwa zewnętrzne pliki – kod JavaScriptu i definiujący wygląd prezentacji arkusz stylów.
Podstawowa konstrukcja nagłówka takiego dokumentu-prezentacji wygląda następująco:
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Prezentacja slajdów</title>
<meta name="copyright"
content="informacje o prawach autorskich" />
<!-- link do arkusza stylów -->
<link rel="stylesheet" type="text/css" media="screen, projection"
href="http://www.w3.org/Talks/Tools/Slidy/show.css" />
<!-- link do skryptu Slidy -->
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
type="text/javascript"></script>
<style type="text/css">
</style>
<!-- opcjonalnie: CSS do wydruku dokumentu -->
<link rel="stylesheet" type="text/css" media="print"
href="http://www.w3.org/Talks/Tools/Slidy/print.css" />
</head>
Oczywiście, jeśli nie mamy w miejscu prezentacji dostępu do Internetu, lepiej pobrać skrypt i pliki graficzne i umieścić je w katalogu z dokumentem prezentacji.
Z kolei element <body> musi być rozpoczęty przez kontener zawierający tło slajdu:
<!-- definicja tła -->
<div class="background">
<img id="head-icon" alt="graphic with four colored squares"
src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" align="left" />
<!-- logo w SVG, przestarzałe przeglądarki mogą załadować GIF-a -->
<object id="head-logo" title="logo" type="image/svg+xml"
data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo.svg">
<img alt="logo" id="head-logo-fallback" src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif"
align="right"/></object>
</div>
Każdy ze slajdów jest zamykany w kontenerze <div> (klasa slide)
<div class="slide"> ... </div>
Można oczywiście przygotować specjalną stronę startową, wyglądającą odmiennie od pozostałych. Wystarczy aby dany kontener <div> był klasy slide cover.
<div class="slide cover">
<img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg"
alt="strona startowa" class="cover" />
<br clear="all" />
<h1>Strona startowa prezentacji</h1>
<p><a href="http://strona.pl">Strona.pl</a>
<a href="mailto:email@strona.pl">e-mail@strona.pl</a></p>
</div>
«poprzednia 1 2 następna »
Popularne
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
22
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Anonymous upubliczniają 1,7 GB danych wykradzionych Departamentowi Sprawiedliwości USA
12
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Zostań webmasterem polskiego rządu, zarobisz na komfortowe życie dla siebie i swojej rodziny
33
Społeczność
piotrek____ @asdfgh - yup, też tak sądzę.
Tak jak wtedy ten przeciek o żołnierzu...
gonzales Javowcy pozdrawiają dotnetowców xD
kaziks Galaxy S II - u mnie po aktualizacji Firefox działa strasznie zacina się...
Doniek Szkoda że strona z demo nie działa - non stop się przeładowuje
bartez Niech zaczną jeszcze bardziej ograniczać programistów, to zdziwią się ilu...
Dave Smith Jestem Pastor Dave Smith prywatny pożyczkodawca pieniądze, z czego ponad...
marcusm Fajna reklama produktu za 500 zł
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
Polecane książki
Praca
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |








